<template>
  <section>
    <h2>我是子组件</h2>
    <p>父组件传来的name: {{ name }}</p>
    <p>父组件传来的age: {{ age }}</p>
    <div>
      <button @click="(handleClick)">向父组件传参{{count}}</button>
    </div>
  </section>
</template>


<script lang="ts" setup>
import { defineProps, watch, defineEmits,ref } from "vue";

const props = defineProps({
  name: {
    type: String,
  },
  age: {
    type: String,
  },
});

// typescript中，语法比较严谨，需要传递要触发的事件名的数组，进行注册
// 一定要在script顶层调用这些钩子函数，不要在函数内部去调用
const emit = defineEmits(["sendCount"]);

watch(
  () => props.name,
  (newVal) => {
    console.log("name传参变化：", newVal);
  },
  { immediate: true }
);

const count = ref(0);

function handleClick() {
    count.value ++;
    emit("sendCount",count.value);
}
</script>

<style>
</style>